<template>
  <div>
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-table :data="tableData" size="mini">
      <el-table-column label="会员名称" prop="ext_data">
        <template slot-scope="scope" v-if="$util.isDef(scope.row.ext_data)">
          {{ scope.row.ext_data.vip_title }}
        </template>
      </el-table-column>
      <el-table-column label="订单编号" prop="order_no"></el-table-column>
      <el-table-column label="充值/续费时间" prop="payment_time">
        <template slot-scope="scope" v-if="$util.isDef(scope.row.payment_time)">
          {{
            $util.isDef(scope.row.payment_time)
              ? scope.row.payment_time
              : 0 | parseTime('{y}-{m}-{d} {h}:{i}')
          }}
        </template>
      </el-table-column>
      <el-table-column label="有效期至" prop="expire_time">
        <template slot-scope="scope" v-if="$util.isDef(scope.row.expire_time)">
          {{ scope.row.expire_time | parseTime('{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column label="金额" prop="payment"></el-table-column>
    </el-table>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/finance/my_vip',
          title: '我的会员'
        },
        {
          path: '/my/finance/my_vip_flow',
          title: '充值记录'
        }
      ],
      tableData: [],
      routePath: this.$route.path
    }
  },
  mounted() {
    this.handleVipFlowList()
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleVipFlowList()
    },
    // 获取数据
    handleVipFlowList() {
      this.$api.getVipFlow(
        {
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          let data = res.data
          this.tableData = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: data.total
          })
        }
      )
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style></style>
